<template>
  <el-card>
    <el-row>
      <h4>导入说明：</h4>
      <p>1、根据三级类编码、区域名称进行数据导入。本导入功能为整体导入功能，请将原有数据一并导入。</p>
      <p>2、从表格第二行进行导入数据。</p>
    </el-row>
    <el-divider />
    <!-- 按钮操作栏 -->
    <BtnRender :render="renderBtnsBar" />
    <SkusTable
      ref="skusTable"
      isCustomSort
      showPagination
      :tableHeight="480"
      :defaultMinWidth="100"
      :dataSource="tableInfo.list"
      :columns="tableInfo.columns"
      :loading="tableInfo.loading"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :total="pagination.total"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
      @customSortChange="handleSortChange"
    />
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SkusTable from '@/components/skusTable';
import { getBtnsBar } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid, isResponseSuccess } from '@/utils/bizUtils';
import skusPage from '@/mixins/commodity/skusPage';
import { RULE_TABLE_COLUMNS } from '../constants/keyProduct';
import { CoreRuleExportEnum, CoreRuleQueryEnum } from '../constants/enum';
import {
  importKeyRuleUrl,
  commitKeyProductRuleService,
  exportKeyProductRuleService,
  queryKeyProductRuleService,
  delKeyProductErrorService
} from '@/api/commodity/commodityManage/productTagManage';
export default {
  mixins: [skusPage],
  components: {
    BtnRender,
    SkusTable
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: [...RULE_TABLE_COLUMNS],
        loading: false
      },
      btnLoading: {
        orgExport: false,
        abnExport: false,
        submit: false,
        abnormal: false
      },
      orderRule: null, // 排序值
      pageSizes: [50, 100, 1000],
      hasAbnormalData: false, // 列表是否含有异常数据
    }
  },
  computed: {
    isNullTable () {
      return this.tableInfo.list.length == 0
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // jsx-render渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '清空异常数据',
          method: this.handleClearAbnormalData,
          loading: this.btnLoading.abnormal,
          disabled: this.isNullTable || !this.hasAbnormalData
        },
        {
          label: '导出原有数据',
          method: this.handleExportOriginalData,
          loading: this.btnLoading.orgExport
        },
        {
          label: '导入',
          action: importKeyRuleUrl,
          methods: { handleUploadSuccess: this.handleImport },
          isImport: true,
          loadingFn: state => { this.tableInfo.loading = state }
        },
        {
          label: '导出异常数据',
          method: this.handleExportAbnormalData,
          loading: this.btnLoading.abnExport
        },
        {
          label: '提交',
          method: this.handleSubmit,
          loading: this.btnLoading.submit,
          disabled: this.isNullTable
        },
        {
          label: '返回',
          method: this.handleGoBack
        }
      ]
      const finalBtns = btnsBar.map(item => ({ ...item, size: 'large' }))
      return getBtnsBar(h, finalBtns, this.showBtn)
    },
    // 清空异常信息
    async handleClearAbnormalData () {
      const loadingFn = state => { this.btnLoading.abnormal = state }
      const res = await delKeyProductErrorService({}, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('异常信息数据清空成功！')
        this.getTableData()
      }
    },
    // 导出原有数据
    async handleExportOriginalData () {
      const data = { exportType: CoreRuleExportEnum.Original }
      const loadingFn = state => { this.btnLoading.orgExport = state }
      const res = await exportKeyProductRuleService(data, loadingFn)
      createExcelByExport({ excelTitle: `重点商品规则原有数据_${generateUuid()}`, res })
    },
    // 导入
    handleImport (res) {
      if (isResponseSuccess(res)) {
        this.reloadTableData()
      }
    },
    // 导出异常数据
    async handleExportAbnormalData () {
      const data = {
        exportType: CoreRuleExportEnum.Abnormal,
        orderRule: this.orderRule
      }
      const loadingFn = state => { this.btnLoading.abnExport = state }
      const res = await exportKeyProductRuleService(data, loadingFn)
      createExcelByExport({ excelTitle: `重点商品规则异常数据_${generateUuid()}`, res })
    },
    // 提交
    async handleSubmit () {
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await commitKeyProductRuleService({}, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('提交成功')
        this.handleGoBack()
      } else {
        this.reloadTableData()
      }
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'productTagManageList' })
    },
    // 表格排序
    handleSortChange ({ order }) {
      this.orderRule = order
      this.reloadTableData()
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.paginationParams,
        orderRule: this.orderRule,
        queryType: CoreRuleQueryEnum.Edit
      }
      const loadingFn = state => { this.tableInfo.loading = state }
      const res = await queryKeyProductRuleService(data, loadingFn)
      if (res.retData) {
        this.tableInfo.list = res.retData?.pageData?.results ?? []
        this.setTotalNum(res.retData?.pageData?.totalNum)
        this.hasAbnormalData = res.retData.hasError == 1 // 1为有异常，2为无异常
      }
    },
    // 重载表格数据
    reloadTableData () {
      this.setNowPage(1)
      this.getTableData()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider {
  margin: 10px 0;
}
</style>
